<template>
  <el-card>
    <!-- 表格 -->
    <CommonTable
      highlight
      :size.sync="tableSize"
      :loading="loading"
      :pageConfig="queryInfo"
      :toolBtns="toolBtns"
      :tableData="tableData"
      :tableLabel="tableLabel"
      @link-click="goInfo"
      @size-change="changeLimit"
      @current-change="changePage"
      @selection-change="multipleSelection = $event"
    >
    </CommonTable>
  </el-card>
</template>

<script>
import CommonTable from '@/components/common/CommonTable'

export default {
  created () {
    this.getCompanyList()
  },
  methods: {
    // 获取企业列表
    getCompanyList () {
      const params = {
        pages: this.queryInfo.currPage,
        size: this.queryInfo.limit
      }
      this.$api.companyList(params).then(res => {
        const { total, list, startRow } = res
        this.queryInfo.total = total
        this.queryInfo.startRow = startRow
        this.tableData = list
      }).catch(err => {
        this.$message.error(err)
      })
    },
    goInfo (item) {
      // console.log(item)
      this.$router.push({ path: 'company/info', query: { id: item.id } })
    },
    // 更改每页条数
    changeLimit (limit) {
      this.queryInfo.limit = limit
      this.getCompanyList()
    },
    // 更改当前页
    changePage (page) {
      this.queryInfo.currPage = page
      this.getCompanyList()
    }
  },
  data () {
    return {
      loading: false,
      dialogVisible: false,
      dialogType: '',
      dialogTitle: '',
      // 表格尺寸初始值
      tableSize: 'medium',
      // 多选选中
      multipleSelection: [],
      // 查询配置
      queryInfo: {
        // 默认每页条数
        limit: 10,
        // 跳过条数
        skip: 0,
        // 默认当前页数
        currPage: 1,
        // 条目总数，需至少请求一次才能获取
        total: 0
      },
      // 表格工具栏（按钮）
      toolBtns: [
        { label: '新建', hook: 'on-create', type: 'primary', icon: 'el-icon-plus' },
        { label: '删除', hook: 'on-remove', type: 'danger', icon: 'el-icon-delete' }
      ],
      // 查询表单
      searchForm: { name: '', code: '', remark: '' },
      searchLabel: [
        { model: 'name', label: '角色名称', placeholder: '请输入', clearable: true },
        { model: 'code', label: '角色标识', placeholder: '请输入', clearable: true },
        { model: 'remark', label: '备注', placeholder: '请输入', clearable: true }
      ],
      // 表格
      tableData: [],
      tableLabel: [
        { model: 'selection', label: '多选', type: 'selection' },
        { model: 'index', label: '序号', type: 'index', align: 'center' },
        { model: 'companyName', label: '公司名称', minWidth: '200', sortable: true, slotType: 'link' },
        { model: 'wheelName', label: '联系人', minWidth: '100', sortable: true },
        { model: 'phoneNo', label: '联系电话', minWidth: '100', sortable: true },
        {
          model: 'action',
          label: '操作',
          minWidth: '180',
          headerAlign: 'center',
          align: 'center',
          fixed: 'right',
          btns: [
            { label: '修改', hook: 'on-row-edit' },
            { label: '分配权限', hook: 'on-row-assign' },
            { label: '删除', hook: 'on-row-delete', color: '#f56c6c' }
          ]
        }
      ]
    }
  },
  components: {
    // CommonSearchForm,
    CommonTable
    // DialogForm
  }
}
</script>

<style lang="scss" scoped>
</style>
